<form
  #form
  (ngSubmit)="submit()"
  [appApiAction]="formPromise"
  [formGroup]="exportForm"
  *ngIf="exportForm"
>
  <h1 bitTypography="h1">{{ "exportVault" | i18n }}</h1>

  <bit-callout type="danger" title="{{ 'vaultExportDisabled' | i18n }}" *ngIf="disabledByPolicy">
    {{ "personalVaultExportPolicyInEffect" | i18n }}
  </bit-callout>
  <app-export-scope-callout
    [organizationId]="organizationId"
    *ngIf="!disabledByPolicy"
  ></app-export-scope-callout>

  <bit-form-field *ngIf="flexibleCollectionsEnabled$ | async">
    <bit-label>{{ "exportFrom" | i18n }}</bit-label>
    <bit-select formControlName="vaultSelector">
      <bit-option [label]="'myVault' | i18n" value="myVault" icon="bwi-user" />
      <bit-option
        *ngFor="let o of organizations$ | async"
        [value]="o.id"
        [label]="o.name"
        icon="bwi-business"
      />
    </bit-select>
  </bit-form-field>

  <bit-form-field>
    <bit-label>{{ "fileFormat" | i18n }}</bit-label>
    <bit-select formControlName="format">
      <bit-option *ngFor="let f of formatOptions" [value]="f.value" [label]="f.name" />
    </bit-select>
  </bit-form-field>

  <ng-container *ngIf="format === 'encrypted_json'">
    <bit-radio-group formControlName="fileEncryptionType" aria-label="exportTypeHeading">
      <bit-label>{{ "exportTypeHeading" | i18n }}</bit-label>

      <bit-radio-button
        id="AccountEncrypted"
        name="fileEncryptionType"
        class="tw-block"
        [value]="encryptedExportType.AccountEncrypted"
        checked="fileEncryptionType === encryptedExportType.AccountEncrypted"
      >
        <bit-label>{{ "accountRestricted" | i18n }}</bit-label>
        <bit-hint>{{ "accountRestrictedOptionDescription" | i18n }}</bit-hint>
      </bit-radio-button>

      <bit-radio-button
        id="FileEncrypted"
        name="fileEncryptionType"
        class="tw-block"
        [value]="encryptedExportType.FileEncrypted"
        checked="fileEncryptionType === encryptedExportType.FileEncrypted"
      >
        <bit-label>{{ "passwordProtected" | i18n }}</bit-label>
        <bit-hint>{{ "passwordProtectedOptionDescription" | i18n }}</bit-hint>
      </bit-radio-button>
    </bit-radio-group>

    <ng-container *ngIf="fileEncryptionType == encryptedExportType.FileEncrypted">
      <div class="tw-mb-3">
        <bit-form-field>
          <bit-label>{{ "filePassword" | i18n }}</bit-label>
          <input
            bitInput
            type="password"
            id="filePassword"
            formControlName="filePassword"
            name="password"
          />
          <button
            type="button"
            bitSuffix
            bitIconButton
            bitPasswordInputToggle
            [(toggled)]="showFilePassword"
          ></button>
          <bit-hint>{{ "exportPasswordDescription" | i18n }}</bit-hint>
        </bit-form-field>
        <app-password-strength [password]="filePassword" [showText]="true"> </app-password-strength>
      </div>
      <bit-form-field>
        <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
        <input
          bitInput
          type="password"
          id="confirmFilePassword"
          formControlName="confirmFilePassword"
          name="confirmFilePassword"
        />
        <button
          type="button"
          bitSuffix
          bitIconButton
          bitPasswordInputToggle
          [(toggled)]="showFilePassword"
        ></button>
      </bit-form-field>
    </ng-container>
  </ng-container>

  <button
    bitButton
    type="submit"
    buttonType="primary"
    [loading]="form.loading"
    [disabled]="disabledByPolicy"
  >
    {{ "confirmFormat" | i18n }}
  </button>
</form>
